
"use client";

import { Button, Checkbox, Label, Modal, TextInput } from "flowbite-react";
import { useState, useEffect } from "react";

export default function BookForm({ openModal, setOpenModal, book }) {
  // const [openModal, setOpenModal] = useState(true);
  const [formData, setFormData] = useState({
    name: "",
    author: "",
    bookLang: "",
    series: "",
    bookFormat: "",
    bookPublish: "",
    bookRate: "",
    bookTag: "",
    tagCode: "",
    content: "",
    bookSize: ""
  });

  function onCloseModal() {
    setOpenModal(false);
  }

  useEffect(() => {
    setFormData(book)
  }, [book]);

  function submitForm() {
    console.log(formData)
    const saveBook = async () => {
      fetch("${process.env.API_BASE_URL}/calibre/api/book/update", {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify(formData)

      }).then(async (response) => {
        var data = await response.json();
        console.log(data)
      })
        .catch((error) => console.error("Error:", error));
    };
    saveBook();
    setOpenModal(false);
  }

  // 处理表单字段变化的函数
  const handleChange = (e) => {
    const { name, value } = e.target;

    // 使用 ... 运算符创建 formData 的一个新副本，并更新相应的字段
    setFormData({
      ...formData,
      [name]: value
    });

  };


  return (
    <>
      {/* <Button onClick={() => setOpenModal(true)}>Toggle modal</Button> */}
      <Modal show={openModal} size="2xl" onClose={onCloseModal} popup>
        <Modal.Header />
        <Modal.Body>
          <div className="space-y-6">
            <h3 className="text-xl font-medium text-gray-900 dark:text-white">{book.name}</h3>

            <div className="flex space-x-4">
              <div>
                <div className="mb-2 block">
                  <Label htmlFor="name" value="书名" />
                </div>
                <TextInput
                  value={formData.name}
                  name="name"
                  onChange={handleChange}
                  required
                />
              </div>
              <div>
                <div className="mb-2 block">
                  <Label htmlFor="author" value="作者" />
                </div>
                <TextInput
                     name="author"
                  value={formData.author}
                  onChange={handleChange}
                  required
                />
              </div>

              <div>
                <div className="mb-2 block">
                  <Label htmlFor="bookLang" value="语言" />
                </div>
                <TextInput
                  name="bookLang"
                  value={formData.bookLang}
                  onChange={handleChange}
                  required
                />
              </div>
            </div>
            <div className="flex space-x-4">
              <div>
                <div className="mb-2 block">
                  <Label htmlFor="series" value="丛书" />
                </div>
                <TextInput
                     name="series"
                  value={formData.series}
                  onChange={handleChange}
                  required
                />
              </div>

              <div>
                <div className="mb-2 block">
                  <Label htmlFor="bookFormat" value="格式" />
                </div>
                <TextInput
                   name="bookFormat"
                  value={formData.bookFormat}
                  onChange={handleChange}
                  required
                />
              </div>

              <div>
                <div className="mb-2 block">
                  <Label htmlFor="bookPublish" value="出版商" />
                </div>
                <TextInput
                  name="bookPublish"
                  value={formData.bookPublish}
                  onChange={handleChange}
                  required
                />
              </div>



            </div>

            <div className="flex space-x-4">
              <div>
                <div className="mb-2 block">
                  <Label htmlFor="bookRate" value="评分" />
                </div>
                <TextInput
                    name="bookRate"
                  value={formData.bookRate}
                  onChange={handleChange}
                  required
                />
              </div>

              <div>
                <div className="mb-2 block">
                  <Label htmlFor="bookTag" value="标签" />
                </div>
                <TextInput
                       name="bookTag"
                  value={formData.bookTag}
                  onChange={handleChange}
                  required
                />
              </div>

              <div>
                <div className="mb-2 block">
                  <Label htmlFor="tagCode" value="tagCode" />
                </div>
                <TextInput
                  name="tagCode"
                  value={formData.tagCode}
                  onChange={handleChange}
                  required
                />
              </div>
            </div>




            <div className="w-full">
              <Button onClick={submitForm}>提交</Button>
            </div>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
}
